import React, { Suspense } from 'react'
import './App.css'

// 导入路由相关的对象
import { HashRouter as Router, Switch, Redirect, Route } from 'react-router-dom'

// 导入相关的页面
// import Login from './views/login'
// import Layout from './views/layout'
// import NotFound from './views/404/NotFound'
const Login = React.lazy(() => import('./views/login'))
const Layout = React.lazy(() => import('./views/layout'))
const NotFound = React.lazy(() => import('./views/404/NotFound'))

function App () {
  return (
    <div className='App'>
      <Suspense
        fallback={
          <div style={{ textAlign: 'center', marginTop: 300 }}>Loading...</div>
        }
      >
        <Router>
          <Switch>
            <Route path='/login' component={Login} />
            <Route path='/layout' component={Layout} />
            <Redirect exact from='/' to='/login' />

            {/* 404的配置要放到最后 */}
            <Route component={NotFound} />
          </Switch>
        </Router>
      </Suspense>
    </div>
  )
}

export default App
